<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>医院基础信息管理</title>
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
</head>
<body class="childrenBody">
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<blockquote class="layui-elem-quote">
    <form class="layui-form" method="post" id="searchFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">医院ID:</label>
                <div class="layui-input-inline">
                    <input type="text" name="realname"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">MySQL url:</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
                    <button type="reset" class="layui-btn layui-btn-warm  layui-icon layui-icon-refresh">重置</button>
                </div>
            </div>
        </div>
    </form>
</blockquote>
<!-- 搜索条件结束 -->

<!-- 数据表格开始 -->
<table class="layui-hide" id="hostipalTable" lay-filter="hostipalTable"></table>
<div style="display: none;" id="userToolBar">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
</div>
<div  id="userBar" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="initDB">建库</a>
    <a class="layui-btn layui-btn-xs" lay-event="connectDB">尝试连接</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>
<!-- 数据表格结束 -->

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
    <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">医院名:</label>
            <div class="layui-input-block">
                <input type="hidden" name="hospitalAddress">
                <input type="text" name="hospitalName" lay-verify="required"   placeholder="请输入医院名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">医院地址:</label>
            <div class="layui-input-block">
                <input type="text" name="hospitalAddress" lay-verify="required"  placeholder="请输入医院地址" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">mysql url:</label>
            <div class="layui-input-block">
                <input type="text" name="mysqlUrl" lay-verify="required"  placeholder="示例 localhost:3306" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">mysql schema:</label>
            <div class="layui-input-block">
                <input type="text" name="mysqlSchema" lay-verify="required"  placeholder="请输入mysql库名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">mysql username:</label>
                <div class="layui-input-block">
                    <input type="text" name="mysqlUsername" lay-verify="required"  placeholder="请输入mysql用户名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">mysql password:</label>
                <div class="layui-input-block">
                    <input type="text" name="mysqlPassword"   placeholder="请输入mysql用户密码" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加和修改的弹出层结束 -->

<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="none">
    var tableIns;
    layui.extend({
        dtree:'layui_ext/dist/dtree'
    }).use([ 'jquery', 'layer', 'form', 'table','dtree'  ], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var dtree=layui.dtree;
        //渲染数据表格
        tableIns=table.render({
            elem: '#hostipalTable'   //渲染的目标对象
            ,url:'hospital/selectAll' //数据接口
            ,title: '用户数据表'//数据导出来的标题
            ,toolbar:"#userToolBar"   //表格的工具条
            ,height:'full-230'
            ,cellMinWidth:140 //设置列的最小默认宽度
            ,page: 1  //是否启用分页, limits: [10, 20, 30]
            ,limits: [10, 20, 30]
            ,limit: 10//默认采用3
            ,cols: [[   //列表数据
                {field:'hospitalId', title:'ID',align:'center',width:'50'}
                ,{field:'hospitalName', title:'医院名',align:'center'}
                ,{field:'hospitalAddress', title:'医院地址',align:'center'}
                ,{field:'mysqlUrl', title:'mysql连接地址',align:'center'}
                ,{field:'mysqlSchema', title:'mysql库名',align:'center'}
                ,{field:'mysqlUsername', title:'mysql用户名',align:'center'}
                ,{field:'mysqlPassword', title:'mysql密码',align:'center'}
                ,{field:'mysqlStatus', title:'是否建库',align:'center',templet:function(d){
                        return d.mysqlStatus=='1'?'<font color=blue>已建库</font>':'<font color=red>未建库</font>';
                    }}
                ,{fixed: 'right', title:'操作', toolbar: '#userBar',align:'center',width:'260'}
            ]]
        })
        //模糊查询
        $("#doSearch").click(function(){
            var params=$("#searchFrm").serialize();
            tableIns.reload({
                url:"hospital/selectAll?"+params
            })
        });

        //监听头部工具栏事件
        table.on("toolbar(hostipalTable)",function(obj){
            switch(obj.event){
                case 'add':
                    openAddPanel();
                    break;
            };
        })
        //监听行工具事件
        table.on('tool(hostipalTable)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除【'+data.hospitalName+'】这个医院吗？删除后该医院所有数据将全部清空', function(index){
                    //向服务端发送删除指令
                    $.post("hospital/deletehospital",{hospitalId:data.hospitalId},function(res){
                        layer.msg(res);
                        //刷新数据 表格
                        tableIns.reload();
                    })
                });
            } else if(layEvent === 'edit'){ //编辑
                openUpdateUser(data);
            } else if(layEvent === 'initDB'){//初始化mysql
                layer.confirm('将为【'+data.hospitalName+'】医院重建后端数据库，请确认信息是否正确', function(index){
                    //向服务端发送删除指令
                    $.post("hospital/inithospitalDB",data,function(res){
                        layer.msg(res);
                        //刷新数据 表格
                        tableIns.reload();
                    })
                });
            }else if(layEvent === 'connectDB'){//初始化mysql
                layer.confirm('将尝试连接【'+data.hospitalName+'】医院后端数据库', function(index){
                    //向服务端发送删除指令
                    $.post("hospital/connectDB",data,function(res){
                        layer.msg(res);
                    })
                });
            }
        });

        var url;
        var mainIndex;
        //打开添加页面
        function openAddPanel(){
            mainIndex=layer.open({
                type:1,
                title:'添加医院--请由管理员操作',
                content:$("#saveOrUpdateDiv"),
                area:['800px','450px'],
                success:function(index){
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                    url="hospital/addhospital";
                }
            });
        }
        //打开修改页面
        function openUpdateUser(data){
            mainIndex=layer.open({
                type:1,
                title:'修改医院--请由管理员操作',
                content:$("#saveOrUpdateDiv"),
                area:['800px','450px'],
                success:function(index){
                    form.val("dataFrm",data);
                    url="hospital/updatehospital";
                }
            });
        }

        function initDB(data){

        }
        //保存
        form.on("submit(doSubmit)",function(obj){
            //序列化表单数据
            var params=$("#dataFrm").serialize();
            $.post(url,params,function(obj){
                layer.msg(obj);
                //关闭弹出层
                layer.close(mainIndex)
                //刷新数据 表格
                tableIns.reload();
            })
        });
    });
</script>
</body>
</html>